<template>
  <div class="pay h100">
    <van-nav-bar title="支付购买" left-arrow @click-left="onClickLeft" />
    <van-card
      num="1"
      price="68"
      desc="赵律师"
      title="商品标题22222222"
      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    />
    <div class="msg">
      <p>订单状态：</p>
      <p>订单编号：</p>
      <p>下单时间：</p>
    </div>
    <van-cell-group>
      <van-cell title="支付方式" />
      <van-cell title="微信支付" icon="location-o">
        <template #right-icon>
          <van-radio-group v-model="radio">
            <van-radio name="1" shape="square" icon-size="14px"></van-radio>
          </van-radio-group>
        </template>
      </van-cell>
      <van-cell title="支付宝支付" value="（支持花呗）" icon="location-o">
        <template #right-icon>
          <van-radio-group v-model="radio">
            <van-radio name="2" shape="square" icon-size="14px"></van-radio>
          </van-radio-group>
        </template>
      </van-cell>
      <van-cell title="优惠券" icon="location-o">
        <template #right-icon>
          <van-radio-group v-model="radio">
            <van-radio name="3" shape="square" icon-size="14px"></van-radio>
          </van-radio-group>
        </template>
      </van-cell>
      <van-cell title="余额支付" icon="location-o">
        <template #right-icon>
          <van-radio-group v-model="radio">
            <van-radio name="4" shape="square" icon-size="14px"></van-radio>
          </van-radio-group>
        </template>
      </van-cell>
    </van-cell-group>
    <div class="footer">
      <p>支付代表已阅读并并同意<span>«律师侠充值协议»</span></p>
    </div>
    <div class="footer1">
      <p>总计:</p>
      <button @click="showPopup">立即购买</button>
      <van-popup
        v-model="show"
        round
        position="bottom"
        :style="{ height: '50%' }"
      >
        <div class="pop-up-box">
          <div class="title">
            还差一点就可以享受金牌律师1对1服务了<br />真的要放弃吗?
          </div>
          <p id="two">放弃您将失去以下特权:</p>
          <div class="center">
            <div v-for="(item, index) in list" :key="index">
              <img :src="item.img" alt="" />
              <p class="one">{{ item.title }}</p>
              <p class="one">{{ item.name }}</p>
            </div>
          </div>
          <div class="three">
            <button @click="payLater">稍后支付</button>
            <button @click="topay">继续支付</button>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
      show: false,
      list: [
        {
          id: 1,
          img: require("@/assets/Di/椭圆5.png"),
          title: "1对1",
          name: "专属服务",
        },
        {
          id: 2,
          img: require("@/assets/Di/椭圆5.png"),
          title: "金牌律师",
          name: "极速响应",
        },
        {
          id: 3,
          img: require("@/assets/Di/椭圆5.png"),
          title: "限时",
          name: "优惠福利",
        },
      ],
    };
  },

  methods: {
    onClickLeft() {
      this.show = true;
    },
    showPopup() {
      this.$router.push("/resultwait");
    },
    payLater() {
      this.$router.push("/resultdef");
    },
    topay() {
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.pay {
  background-color: #efefef;
  .van-card:not(:first-child) {
    margin-top: 0;
    background-color: white;
  }
  .msg {
    margin-top: 0.14rem;
    margin-bottom: 0.14rem;
    background-color: white;
    height: 2.3rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    p {
      font-size: 0.16rem;
      margin-left: 0.3rem;
    }
  }
  .footer {
    font-size: 0.16rem;
    color: #bebebe;
    text-align: center;
    margin-top: 1.7rem;
    p {
      span {
        color: #333;
      }
    }
  }
  .footer1 {
    width: 100%;
    position: fixed;
    height: 1.1rem;
    bottom: 0;
    left: 0;
    background-color: white;
    display: flex;
    align-items: center;
    p {
      flex: 1;
      margin-left: 0.5rem;
    }
    button {
      width: 0.88rem * 2;
      height: 0.36rem * 2;
      border: none;
      border-radius: 0.5rem;
      margin-right: 0.3rem;
    }
  }
}
// 弹出框
.pop-up-box {
  margin: 0.3rem 0.6rem;
  .title {
    line-height: 0.5rem;
  }
  #two {
    margin: 0.2rem 0 0.5rem;
    font-size: 0.24rem;
    color: #6c6c6c;
  }
  .center {
    display: flex;
    div {
      flex: 1;
      text-align: center;
      img {
        width: 1.1rem;
        height: 1.1rem;
      }
      .one {
        font-size: 0.24rem;
        color: #6c6c6c;
        margin: 0;
      }
    }
  }
  .three {
    display: flex;
    margin-top: 1rem;
    button {
      flex: 1;
      &:nth-of-type(1) {
        background-color: #cecece;
        color: white;
      }
      &:nth-of-type(2) {
        background-color: #9a9a9a;
        color: white;
      }
    }
  }
}

.van-nav-bar {
  ::v-deep .van-icon-arrow-left:before {
    color: black;
  }
}

.van-card__price {
  float: right;
}
.van-card__num {
  position: relative;
  left: 0.5rem;
  top: -1rem;
}
.van-cell__value {
  position: relative;
  left: -3rem;
}
</style>